<template>
  <div class="user-card">
    <div class="avatar">
      <img :src="userAvatar" alt="avatar" />
    </div>
    <div class="welcome">Hi, 欢迎{{ isLogin ? userNickname : '来到我们的商城' }}</div>
    <div class="actions">
      <template v-if="isLogin">
        <button class="user-center" @click="goUserCenter">个人中心</button>
      </template>
      <template v-else>
        <button class="login" @click="goLogin">登录</button>
        <button class="register" @click="goRegister">注册</button>
      </template>
    </div>
    <div class="quick-links">
      <div class="link" @click="handleCheckin">{{ checkinStatus }}</div>
      <div class="link"
        :class="{
          'link-active': kaihuStatus === '立即开户',
          'link-disabled': kaihuStatus === '已开通账户' || kaihuStatus === '未登录'
        }"
        @click="handleKaihu"
      >{{ kaihuStatus }}</div>
      <div class="link" @click="goCart">购物车</div>
      <div class="link" @click="helppage">帮助中心</div>
      <div class="link" @click="goAddress">收货地址</div>
    </div>
  </div>
</template>

<script setup>
import router from "@/router/index.js";
import { checkin, getKaihu, isCheckin, checkUserOpenAccount } from '@/api/user'
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/store/user'
import { createOrderAndPay } from '@/store/cart'

const userStore = useUserStore()

const checkinStatus = ref('未签到')
const kaihuStatus = ref('开通账户')
const isLogin = computed(() => !!localStorage.getItem('token'))
const userAvatar = computed(() => userStore.user?.avator || userStore.user?.avatar || 'https://static.zibovip.top/imgs/2025/03/7139cadfe5ccf3b6.png')
const userNickname = computed(() => userStore.user?.nickname || userStore.user?.username || '用户')

// 检查用户今日是否已签到
async function checkCheckinStatus() {
  if (!isLogin.value) {
    checkinStatus.value = '未登录'
    return
  }
  
  try {
    const res = await isCheckin()
    if (res.code === 200) {
      checkinStatus.value = res.data ? '今日已签到' : '未签到'
    } else {
      checkinStatus.value = '未签到'
    }
  } catch (e) {
    checkinStatus.value = '未签到'
  }
}

// 检查用户是否已开户
async function checkKaihuStatus() {
  if (!isLogin.value) {
    kaihuStatus.value = '未登录'
    return
  }
  
  try {
    const res = await checkUserOpenAccount()
    if ((res.code === 200 && res.data) || res.data === '已开户') {
      kaihuStatus.value = '已开通账户'
    } else {
      kaihuStatus.value = '立即开户'
    }
  } catch (e) {
    kaihuStatus.value = '立即开户'
  }
}

// 组件挂载时检查签到状态和开户状态
onMounted(() => {
  checkCheckinStatus()
  checkKaihuStatus()
})

function helppage(){
  router.push('/help')
  setTimeout(() => {
    window.location.reload()
  }, 1000)
}

function goCart() {
  router.push('/cart')
  setTimeout(() => {
    window.location.reload()
  }, 1000)
}

function goAddress() {
  router.push('/address')
  setTimeout(() => {
    window.location.reload()
  }, 1000)
}

async function handleKaihu() {
  if (!isLogin.value) {
    alert('请先登录再开通账户')
    return
  }
  
  // 如果已经开户，显示提示
  if (kaihuStatus.value === '已开通账户') {
    alert('您已经开通账户了')
    return
  }
  
  try {
    const res = await getKaihu({})
    if (res.code === 200) {
      alert(res.msg || '开户成功！')
      // 开户成功后重新检查开户状态
      await checkKaihuStatus()
    } else {
      alert(res.msg || '开户失败')
    }
  } catch (e) {
    alert('开户请求失败，请重试')
  }
}

async function handleCheckin() {
  try {
    const res = await checkin()
    if (res.code === 200) {
      if (typeof res.data === 'string' && res.data.includes('已经签到')) {
        checkinStatus.value = '今日已签到'
        alert(res.data || '您今天已经签过到了')
      } else {
        checkinStatus.value = '已签到'
        alert(res.msg || '签到成功！')
        // 签到成功后重新检查签到状态
        await checkCheckinStatus()
      }
    } else if (res.code === 401) { // 假设401为未登录状态码
      checkinStatus.value = '未登录'
      alert('请先登录再进行签到')
      // 可添加跳转登录页逻辑：router.push('/login')
    } else if (res.code === 400) { // 假设400为已签到状态码
      checkinStatus.value = '今日已签到'
      alert(res.msg || '您今天已经签过到了')
    } else {
      throw new Error('签到失败')
    }
  } catch (e) {
    checkinStatus.value = '签到失败'
    alert('签到失败，请重试')
  }
}

function goLogin() {
  router.push('/login')
  setTimeout(() => {
    window.location.reload()
  }, 100)
}

function goRegister() {
  router.push('/register')
  setTimeout(() => {
    window.location.reload()
  }, 100)
}

function goUserCenter() {
  router.push('/user')
}
</script>

<style scoped>
.user-card {
  width: 330px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
}
.avatar img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin-bottom: 12px;
}
.welcome {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 16px;
}
.actions {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}
.login, .register {
  padding: 6px 18px;
  border: none;
  border-radius: 20px;
  font-size: 1rem;
  cursor: pointer;
}
.login {
  background: #f43f5e;
  color: #fff;
}
.register {
  background: #fbbf24;
  color: #fff;
}
.user-center {
  padding: 6px 18px;
  border: none;
  border-radius: 20px;
  font-size: 1rem;
  cursor: pointer;
  background: #34d399;
  color: #fff;
}
.quick-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
  margin-top: 0;
  justify-items: center;

}
.link {
  font-size: 0.95rem;
  color: #555;
  background: #f3f4f6;
  border-radius: 12px;
  padding: 4px 10px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
.link:hover {
  background: #e0e7ff;
  color: #4f46e5;
}
.link-disabled {
  background: #f3f4f6 !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
}
.link-disabled:hover {
  background: #f3f4f6 !important;
  color: #9ca3af !important;
}
.link-active {
  background: #f43f5e;
  color: #fff;
  font-weight: bold;
  border: none;
  box-shadow: 0 2px 8px rgba(244,63,94,0.08);
  transition: background 0.2s, color 0.2s;
}
.link-active:hover {
  background: #be123c;
  color: #fff;
}
</style>
